<template>
    <view class="content">
        <view class="header">
            <view class="head">
                <view class="head-l">{{ storeInfo.shopName }}</view>
                <view class="head-r">距离{{ filterTofixed(storeInfo.distance) }}</view>
            </view>
            <view class="times">
                <view class="item" v-for="item in weekDay" :class="{ check: selectDay == item.date }" @click="checkDay(item)">
                    <view class="week">{{ item.weekDay }}</view>
                    <view class="date">{{ item.name }}</view>
                </view>
            </view>
        </view>
        <view class="scroll-main">
            <scroll-view :scroll-top="scrollTop" scroll-y="true" scroll-x="true" class="scroll-Y">
                <view class="main">
                    <view class="names">
                        <view class="name" v-for="item in tableNum">{{ item.billiardName }}</view>
                    </view>
                    <view class="table">
                        <view class="time-line" :style="{ top: timeLineTop }"></view>
                        <view class="table-row" v-for="sitem in timers">
                            <view class="time">{{ sitem.time }}</view>
                            <view class="table-cell" v-for="item in sitem.list" :key="item.id">
                                <view
                                    class="top-line"
                                    v-for="child in item.data"
                                    @click="onTopLine(sitem, item, child)"
                                    :class="{
                                        disable: sitem.disabled,
                                        'child-disable':child.disabled,
                                        check: child.check,
                                        'top-check': child.id == checkTimeChildIds[0],
                                        'bottom-check': child.id == checkTimeChildIds[1],
                                    }"
                                >
                                    <view v-if="checkTimeChildIds[1] === child.id">
                                        {{ startAndEndTime }}
                                    </view>
                                    <!-- {{ child.isShowTime &&  || '' }} -->
                                </view>
                                <!-- <view class="bottom-line" @click="onbottomLine(sitem,item)" :class="{ disable: sitem.disabled,check:item.bottomCheck }">{{ startAndEndTime && item.isStart && `${checkStartTime}-${checkEndTime}` || '' }}</view> -->
                            </view>
                        </view>
                    </view>
                </view>
            </scroll-view>
        </view>

        <view class="footer" @click="submit">
            <view class="foot-t">
                <view>提前1小时可随时退，逾期不可退</view>
                <view class="foot-t-r" @click.stop="goCoupon">
                    <image
                    class="tg"
                        src="/static/tg.png"
                    />
                    <view>团购券预订</view>
                    <image
                    class="jt"
                        src="/static/jt.png"
                    />
                </view>
            </view>
            <view class="btn">
                <view class="btn-l">
                    <view class="tatol-price">¥{{ payPriceObj.payPrice / 100 || 0 }}</view>
                    <!-- <view class="discount" v-if="payPriceObj.totalPrice !== payPriceObj.payPrice">已优惠：¥{{ ((payPriceObj.totalPrice - payPriceObj.payPrice) / 100).toFixed(2) }}</view> -->
                </view>
                <view class="btn-r">
                    <view>下一步</view>
                    <image class="jt" src="/static/jt-b.png" />
                </view>
            </view>
        </view>
    </view>
</template>
<script setup>
import { ref, reactive, watch, getCurrentInstance, onMounted } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { listItemByMainId, billiardSettlement, orderSubmit, createBilliardOrder } from "@/service/index";
import dayjs from "dayjs";
const timers = ref([
    {
        time: "00:00",
        index: 0,
        list: [
            {
                id: 1,
                name: "桌号1",
            },
            {
                id: 2,
                name: "桌号2",
            },
            {
                id: 3,
                name: "桌号3",
            },
            {
                id: 4,
                name: "桌号4",
            },
        ],
    },
    {
        time: "01:00",
        index: 1,
        list: [
            {
                id: 1,
                name: "桌号1",
            },
            {
                id: 2,
                name: "桌号2",
            },
            {
                id: 3,
                name: "桌号3",
            },
            {
                id: 4,
                name: "桌号4",
            },
        ],
    },
    {
        time: "02:00",
        index: 2,
        list: [
            {
                id: 1,
                name: "桌号1",
            },
            {
                id: 2,
                name: "桌号2",
            },
            {
                id: 3,
                name: "桌号3",
            },
            {
                id: 4,
                name: "桌号4",
            },
        ],
    },
    {
        time: "03:00",
        index: 3,
        list: [
            {
                id: 1,
                name: "桌号1",
            },
            {
                id: 2,
                name: "桌号2",
            },
            {
                id: 3,
                name: "桌号3",
            },
            {
                id: 4,
                name: "桌号4",
            },
        ],
    },
    {
        time: "04:00",
        index: 4,
        list: [
            {
                id: 1,
                name: "桌号1",
            },
            {
                id: 2,
                name: "桌号2",
            },
            {
                id: 3,
                name: "桌号3",
            },
            {
                id: 4,
                name: "桌号4",
            },
        ],
    },
    {
        time: "05:00",
        index: 5,
        list: [
            {
                id: 1,
                name: "桌号1",
            },
            {
                id: 2,
                name: "桌号2",
            },
            {
                id: 3,
                name: "桌号3",
            },
            {
                id: 4,
                name: "桌号4",
            },
        ],
    },
    {
        time: "06:00",
        index: 6,
        list: [
            {
                id: 1,
                name: "桌号1",
            },
            {
                id: 2,
                name: "桌号2",
            },
            {
                id: 3,
                name: "桌号3",
            },
            {
                id: 4,
                name: "桌号4",
            },
        ],
    },
    {
        time: "07:00",
        index: 7,
        list: [
            {
                id: 1,
                name: "桌号1",
            },
            {
                id: 2,
                name: "桌号2",
            },
            {
                id: 3,
                name: "桌号3",
            },
            {
                id: 4,
                name: "桌号4",
            },
        ],
    },
    {
        time: "08:00",
        index: 8,
        list: [
            {
                id: 1,
                name: "桌号1",
            },
            {
                id: 2,
                name: "桌号2",
            },
            {
                id: 3,
                name: "桌号3",
            },
            {
                id: 4,
                name: "桌号4",
            },
        ],
    },
    {
        time: "09:00",
        index: 9,
        list: [
            {
                id: 1,
                name: "桌号1",
            },
            {
                id: 2,
                name: "桌号2",
            },
            {
                id: 3,
                name: "桌号3",
            },
            {
                id: 4,
                name: "桌号4",
            },
        ],
    },
    {
        time: "10:00",
        index: 10,
        list: [
            {
                id: 1,
                name: "桌号1",
            },
            {
                id: 2,
                name: "桌号2",
            },
            {
                id: 3,
                name: "桌号3",
            },
            {
                id: 4,
                name: "桌号4",
            },
        ],
    },
    {
        time: "11:00",
        index: 11,
        list: [
            {
                id: 1,
                name: "桌号1",
            },
            {
                id: 2,
                name: "桌号2",
            },
            {
                id: 3,
                name: "桌号3",
            },
            {
                id: 4,
                name: "桌号4",
            },
        ],
    },
    {
        time: "12:00",
        index: 12,
        list: [
            {
                id: 1,
                name: "桌号1",
            },
            {
                id: 2,
                name: "桌号2",
            },
            {
                id: 3,
                name: "桌号3",
            },
            {
                id: 4,
                name: "桌号4",
            },
        ],
    },
    {
        time: "13:00",
        index: 13,
        list: [
            {
                id: 1,
                name: "桌号1",
            },
            {
                id: 2,
                name: "桌号2",
            },
            {
                id: 3,
                name: "桌号3",
            },
            {
                id: 4,
                name: "桌号4",
            },
        ],
    },
    {
        time: "14:00",
        index: 14,
        list: [
            {
                id: 1,
                name: "桌号1",
            },
            {
                id: 2,
                name: "桌号2",
            },
            {
                id: 3,
                name: "桌号3",
            },
            {
                id: 4,
                name: "桌号4",
            },
        ],
    },
    {
        time: "15:00",
        index: 15,
        list: [
            {
                id: 1,
                name: "桌号1",
            },
            {
                id: 2,
                name: "桌号2",
            },
            {
                id: 3,
                name: "桌号3",
            },
            {
                id: 4,
                name: "桌号4",
            },
        ],
    },
    {
        time: "16:00",
        index: 16,
        list: [
            {
                id: 1,
                name: "桌号1",
            },
            {
                id: 2,
                name: "桌号2",
            },
            {
                id: 3,
                name: "桌号3",
            },
            {
                id: 4,
                name: "桌号4",
            },
        ],
    },
    {
        time: "17:00",
        index: 17,
        list: [
            {
                id: 1,
                name: "桌号1",
            },
            {
                id: 2,
                name: "桌号2",
            },
            {
                id: 3,
                name: "桌号3",
            },
            {
                id: 4,
                name: "桌号4",
            },
        ],
    },
    {
        time: "18:00",
        index: 18,
        list: [
            {
                id: 1,
                name: "桌号1",
            },
            {
                id: 2,
                name: "桌号2",
            },
            {
                id: 3,
                name: "桌号3",
            },
            {
                id: 4,
                name: "桌号4",
            },
        ],
    },
    {
        time: "19:00",
        index: 19,
        list: [
            {
                id: 1,
                name: "桌号1",
            },
            {
                id: 2,
                name: "桌号2",
            },
            {
                id: 3,
                name: "桌号3",
            },
            {
                id: 4,
                name: "桌号4",
            },
        ],
    },
    {
        time: "20:00",
        index: 20,
        list: [
            {
                id: 1,
                name: "桌号1",
            },
            {
                id: 2,
                name: "桌号2",
            },
            {
                id: 3,
                name: "桌号3",
            },
            {
                id: 4,
                name: "桌号4",
            },
        ],
    },
    {
        time: "21:00",
        index: 21,
        list: [
            {
                id: 1,
                name: "桌号1",
            },
            {
                id: 2,
                name: "桌号2",
            },
            {
                id: 3,
                name: "桌号3",
            },
            {
                id: 4,
                name: "桌号4",
            },
        ],
    },
    {
        time: "22:00",
        index: 22,
        list: [
            {
                id: 1,
                name: "桌号1",
            },
            {
                id: 2,
                name: "桌号2",
            },
            {
                id: 3,
                name: "桌号3",
            },
            {
                id: 4,
                name: "桌号4",
            },
        ],
    },
    {
        time: "23:00",
        index: 23,
        list: [
            {
                id: 1,
                name: "桌号1",
            },
            {
                id: 2,
                name: "桌号2",
            },
            {
                id: 3,
                name: "桌号3",
            },
            {
                id: 4,
                name: "桌号4",
            },
        ],
    },
]);
const storeInfo = ref({});
const selectDay = ref("");
const beginIndex = ref(0);
const endIndex = ref(0);
const weekDay = ref([]);
const oldTableData = ref([]); // 原始数据，接口返回的
const checkNo = ref(null); // 选择的桌号
const counter = ref(0); // 记录是否选择完
const checkStartTime = ref(null); // 选择的开始时间
const checkEndTime = ref(null); // 选择的结束时间
const startAndEndTime = ref(null);
const startAndEndTimeArr = ref([]);
const timeLineTop = ref(0); // 当前时间线的位置
const timeObj = ref({});
const checkStore = ref({}); // 选择的店铺
const weekDayFit = {
    0: "星期日",
    1: "星期一",
    2: "星期二",
    3: "星期三",
    4: "星期四",
    5: "星期五",
    6: "星期六",
}
const checkTimeChildIds = ref([]);
const tableNum = ref([]);
const payPriceObj = ref({}); // 支付价格
const init = () => {
    selectDay.value = dayjs().format("YYYY-MM-DD");
    getData();
};
const getData = () => {
    uni.showLoading();
    const params = {
        date: selectDay.value,
    };
    listItemByMainId(params).then(res => {
        uni.hideLoading();
        tableNum.value = res.map(v => {
            return v.billiardMainDO;
        });
        oldTableData.value = res;
        console.log(tableNum.value);
        timers.value = parseAndReformatData(res);
    });
};
const checkDay = item => {
    selectDay.value = item.date;
    checkNo.value = null;
    counter.value = 0;
    checkTimeChildIds.value = [];
    startAndEndTime.value = null;
    startAndEndTimeArr.value = [];
    getData();
};
// 生成一周的日期
const onWeekDay = () => {
    const startDate = dayjs();
    const data = [];
    // 生成一周内的日期
    for (let i = 0; i < 7; i++) {
        const obj = {};
        // 计算今天的日期加上i天后的日期
        const date = startDate.add(i, "day");
        // 格式化日期为 "xx月xx日" 格式
        const formattedDate = date.format("MM月DD日");
        const formatted = date.format("YYYY-MM-DD");
        const day = date.day()
        if(i ==0){
            obj.weekDay = '今天';
        } else if(i == 1){
            obj.weekDay = '明天';
        } else{
            obj.weekDay = weekDayFit[day];
        }
        obj.name = formattedDate;
        obj.date = formatted;
        // 输出格式化的日期
        console.log(formattedDate);
        data.push(obj);
    }
    console.log(data,'data');
    
    return data;
};
const filterTofixed = value => {
    if (value > 1) {
        return value.toFixed(1) + "km";
    }
    if (value < 1) {
        return (value * 1000).toFixed(0) + "m";
    }
    return 0;
};
// 格式化数据
const parseAndReformatData = fileContent => {
    const parsedData = timers.value;
    const formattedData = [];

    // 遍历每天的数据
    parsedData.forEach((dayData, index) => {
        const dayFormattedData = {
            time: dayData.time,
            date: `${selectDay.value} ${dayData.time}`,
            index: index,
            disabled: !dayjs().isBefore(`${selectDay.value} ${dayData.time}`),
            list: [],
        };
        // 遍历桌台的数据
        fileContent.forEach(tableData => {
            const { billiardMainDO, items } = tableData;
            items.forEach(itemsChild => {
                itemsChild.disabled = itemsChild.itemStatus === 3;
                    })
            const obj = {
                ...billiardMainDO,
                data: [items[2 * index], items[2 * index + 1]],
            };
            dayFormattedData.list.push(obj);
        });
        formattedData.push(dayFormattedData);
    });
    console.log(formattedData, "formattedData");

    return formattedData;
};
const setTimeLineTop = () => {
    const now = new Date();
    // 使用getTime()方法获取当前时间距 Unix 纪元的毫秒数
    const houres = now.getHours();
    const minutes = now.getMinutes();
    const seconds = now.getSeconds();
    // 将毫秒转换为秒
    const timestampInSeconds = houres * 3600 + minutes * 60 + seconds;
    const top = (timestampInSeconds / 86400) * 100;
    console.log(top);
    timeLineTop.value = top + "%";
};
const onTopLine = (sitem, item, childItem) => {
    console.log("onTopLine", sitem, item, childItem);
    if (sitem.disabled || childItem.disabled) {
        return;
    }
    // 已经选择完时间段,重新选择，重置
    if (counter.value == 2) {
        checkNo.value = null;
        counter.value = 0;
        checkTimeChildIds.value = [];
        startAndEndTime.value = null;
        startAndEndTimeArr.value = [];
        timers.value.forEach(item => {
            item.list.forEach(v => {
                v.data.forEach(c => {
                    c.check = false;
                    c.isShowTime = false;
                });
            });
        });
    }
    console.log(checkNo.value, item.id);
    // 二次选择的不是同一个桌号的时候清空之前选择
    if (checkNo.value && checkNo.value != item.id) {
        checkTimeChildIds.value = [];
        timers.value.forEach(item => {
            item.list.forEach(v => {
                v.data.forEach(c => {
                    c.check = false;
                    c.isShowTime = false;
                });
            });
        });
        checkNo.value = null;
    }
    if (checkNo.value) {
        if(timeObj.value[0].id === childItem.id){
            uni.showToast({
                title: '预约最少一小时',
                icon: 'none',
            })
            return;
        }
        // 第二次选中保持为结束时间
        checkEndTime.value = childItem.frameEndTime;
        timeObj.value[1] = childItem;
        counter.value = 2;
        endIndex.value = sitem.index;
        // 根据比较开始时间和结束时间判断出实际的开始时间
        const starDay = dayjs(`${selectDay.value} ${checkStartTime.value}:00`);
        const endDay = dayjs(`${selectDay.value} ${checkEndTime.value}:00`);
        console.log(starDay, endDay, `${selectDay.value} ${checkStartTime.value}:00`);
        let type = 0;
        let firstTime = "";
        let firstIndex = 0;
        let twoIndex = 0;
        if (starDay.isBefore(endDay)) {
            console.log("starDay小于endDay");
            // type = timeObj.value[checkStartTime.value].type
            console.log(timeObj.value, checkStartTime.value, "type");

            firstTime = checkStartTime.value;
            firstIndex = beginIndex.value;
            twoIndex = endIndex.value;
            startAndEndTime.value = `${checkStartTime.value}-${checkEndTime.value}`;
            startAndEndTimeArr.value = [`${checkStartTime.value}`, `${checkEndTime.value}`];
            checkTimeChildIds.value.push(childItem.id);
        } else {
            // 开始时间大于结束时间，修改开始时间
            console.log("starDay大于endDay");
            checkTimeChildIds.value = [];
            timers.value.forEach(item => {
                item.list.forEach(v => {
                    v.data.forEach(c => {
                        c.check = false;
                        c.isShowTime = false;
                    });
                });
            });
            checkNo.value = null;
            checkStartTime.value = childItem.frameStartTime;
            timeObj.value[0] = childItem;
            // item.isStart = true;
            counter.value = 1;
            beginIndex.value = sitem.index;
            checkStore.value = item;
            checkTimeChildIds.value.push(childItem.id);
            checkNo.value = item.id;
            childItem.check = !childItem.check;
            return;
            // checkEndTime.value = childItem.frameStartTime
            // checkStartTime.value = timeObj.value[0].frameEndTime;
            // console.log(timeObj.value, "type");
            // firstTime = checkEndTime.value;
            // firstIndex = endIndex.value;
            // twoIndex = beginIndex.value;
            // startAndEndTime.value = `${checkEndTime.value}-${checkStartTime.value}`;
            // startAndEndTimeArr.value = [`${checkEndTime.value}`, `${checkStartTime.value}`];
            // checkTimeChildIds.value.unshift(childItem.id);
        }
        //
        oldTableData.value.forEach(v => {
            if (v.billiardMainDO.id === checkNo.value) {
                v.items.forEach(v2 => {
                    if (v2.frameStartTime < startAndEndTimeArr.value[1] && v2.frameEndTime > startAndEndTimeArr.value[0]) {
                        if(v2.disabled){
                            
                            uni.showToast({
                                title: '选择区域已经被预约',
                                icon: 'none',
                            })
                            throw new Error('')
                        }
                        v2.check = true;
                    }
                });
            }
        });
        timers.value = parseAndReformatData(oldTableData.value);
        timers.value.forEach(v => {
            // if (v.index >= firstIndex && v.index <= twoIndex) {
            //     v.list.forEach(v2 => {
            //         if (v2.id === checkNo.value) {
            //             v2.data.forEach(v3 => {
            //                 v3.check = true;
            //             });
            //         }
            //     });
            // }
            if (firstTime === v.time) {
                v.list.forEach(v2 => {
                    if (v2.id === checkNo.value) {
                        console.log(v2, "v2", type);

                        // v2.data[type - 1].isShowTime = true;
                        // v2.data[type - 1].startAndEndTime = startAndEndTime.value;
                    }
                });
            }
        });
        console.log(timers.value, "----", checkTimeChildIds.value, startAndEndTime.value);
        console.log(oldTableData.value, "oldTableData.value");
        console.log(checkTimeChildIds.value, "-------");
        getPayMount();
        return;
    }
    // 第一次选中保存开始时间
    if (!checkNo.value) {
        checkStartTime.value = childItem.frameStartTime;
        timeObj.value[0] = childItem;
        // item.isStart = true;
        counter.value = 1;
        beginIndex.value = sitem.index;
        checkStore.value = item;
        checkTimeChildIds.value.push(childItem.id);
    }

    checkNo.value = item.id;
    childItem.check = !childItem.check;
};
// 获取结算数据
const getPayMount = () => {
    console.log(startAndEndTimeArr.value, "startAndEndTimeArr.value");
    
    const params = {
        billiardMainId: checkStore.value.id,
        startTime: `${selectDay.value} ${startAndEndTimeArr.value[0]}:00`,
        endTime: `${selectDay.value} ${startAndEndTimeArr.value[1]}:00`,
        orderSource: 2,
        // couponId: groupBuyCouponId.value || groupCouponId.value,
        // orderDuration:Math.abs(orderDuration.value)
    };
    uni.showLoading({
        mask: true,
    });

    billiardSettlement(params)
        .then(res => {
            payPriceObj.value.payPrice = res.price.payPrice;
            payPriceObj.value.totalPrice = res.price.totalPrice;
            payPriceObj.value.items = res.items;
            payPriceObj.value.itemGroupList = res.itemGroupList;
            uni.hideLoading();
        })
        .catch(err => {
            uni.hideLoading();
            uni.showModal({
                title: err.msg || "请求数据出错",
                showCancel: false,
            });
        });
};
const submit = () => {
    if (!startAndEndTimeArr.value.length) {
        uni.showToast({
            title: "请选择时间段",
            icon: "none",
            duration: 2000,
        });
        return;
    }
    uni.setStorageSync('creatOrderData', {
            items: payPriceObj.value.items,
            startTime: `${selectDay.value} ${startAndEndTimeArr.value[0]}:00`,
            endTime: `${selectDay.value} ${startAndEndTimeArr.value[1]}:00`,
            billiardMainId: checkStore.value.id,
            billiardMainName: checkStore.value.billiardName,
            remark: "",
            channelCode: "wx_lite",
            orderSource: 2,
            price: payPriceObj.value.payPrice,
            totalPrice: payPriceObj.value.totalPrice,
        });
    uni.setStorageSync('billiardOrderInfo', {
        billiardMainId: checkStore.value.id,
        startTime: `${selectDay.value} ${startAndEndTimeArr.value[0]}:00`,
        endTime: `${selectDay.value} ${startAndEndTimeArr.value[1]}:00`,
        orderSource: 2,
    })
    uni.navigateTo({ url: '/pages/order/index'});

    // creatSubmit();
};
const creatSubmit = () => {
    const params = {
        items: payPriceObj.value.items,
        // couponId: groupBuyCouponId.value || groupCouponId.value,
        startTime: `${selectDay.value} ${startAndEndTimeArr.value[0]}:00`,
        endTime: `${selectDay.value} ${startAndEndTimeArr.value[1]}:00`,
        billiardMainId: checkStore.value.id,
        billiardMainName: checkStore.value.billiardName,
        remark: "",
        channelCode: "wx_lite",
        orderSource: 2,
        // orderDuration:Math.abs(orderDuration.value)
    };
    //   if (payTypeCheck.value.value == 1) {
    //     params.channelCode = "wallet";
    //   }
    uni.showLoading({
        mask: true,
    });
    createBilliardOrder(params)
        .then(res => {
            payOrder(res);
        })
        .catch(() => {
            uni.hideLoading();
        });
};
const payOrder = param => {
    console.log(param, "param");
    const orderid = param.id;
    const params = {
        id: param.payOrderId,
        channelCode: "wx_lite",
        channelExtras: {
            openid: uni.getStorageSync("openid"),
        },
        // orderDuration:Math.abs(orderDuration.value)
    };
    //   if (payTypeCheck.value.value == 1) {
    //     params.channelCode = "wallet";
    //   }
    orderSubmit(params)
        .then(res => {
            const payConfig = JSON.parse(res.displayContent);
            console.log(payConfig, "pay");
            //   if (payTypeCheck.value.value == 1) {
            //     uni.showToast({
            //       title: "支付成功",
            //       icon: "none",
            //     });
            //     uni.redirectTo({
            //       url: `/pages/order/detail?id=${orderid}`,
            //     });
            //     return;
            //   }
            uni.requestPayment({
                provider: "wxpay",
                timeStamp: payConfig.timeStamp,
                nonceStr: payConfig.nonceStr,
                package: payConfig.packageValue,
                signType: payConfig.signType,
                paySign: payConfig.paySign,
                success: res => {
                    console.log(orderid, "orderid");
                    uni.redirectTo({
                        url: `/pages/order/detail?id=${orderid}`,
                    });
                    uni.hideLoading();
                },
                fail: err => {
                    uni.hideLoading();
                    if (err.errMsg === "requestPayment:fail cancel") {
                        uni.showToast({
                            title: "支付已取消",
                            icon: "none",
                        });
                    } else {
                        console.log(err, "err");
                    }
                },
            });
        })
        .catch(err => {
            if (err.code === 1007002002) {
                uni.redirectTo({
                    url: `/pages/order/detail?id=${orderid}`,
                });
            }
            uni.hideLoading();
        });
};
const goCoupon = ()=>{
    if (!startAndEndTimeArr.value.length) {
        uni.showToast({
            title: "请选择时间段",
            icon: "none",
            duration: 2000,
        });
        return;
    }
    uni.navigateTo({ url: `/pages/coupon/detail?type=mine`})
}
const setDisable = () => {
    const now = dayjs();
    timers.value.forEach(item => {
        item.list.forEach(v => {
            v.data = [
                {
                    type: 1,
                    check: false,
                    isShowTime: false,
                },
                {
                    type: 2,
                    check: false,
                    isShowTime: false,
                },
            ];
        });
        if (dayjs(`${dayjs().format("YYYY-MM-DD")} ${item.time}:00`).isBefore(now)) {
            item.disabled = true;
        } else {
            item.disabled = false;
        }
    });
    console.log(timers.value);
};
onShow(() => {
    init();
    setTimeLineTop();
    uni.removeStorageSync("couponData")
    weekDay.value = onWeekDay();
    storeInfo.value = uni.getStorageSync("mainStoreInfo");
    // setDisable();
});
</script>
<style lang="less" scoped>
.content {
    background-color: #fff;
    overflow: hidden;
    height: 100vh;
    display: flex;
    flex-direction: column;
    .header {
    }
    .df-c {
        display: flex;
        align-items: center;
    }

    .head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #fff;
        padding: 24rpx 0;
        margin: 0 26rpx;
        border-bottom: 2rpx solid #eeeeee;

        .head-l {
            font-size: 28rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #333333;
        }

        .head-r {
            font-size: 26rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #0787f8;
        }
    }

    .times {
        display: flex;
        align-items: center;
        padding: 14rpx 22rpx;

        flex-wrap: nowrap;
        overflow-x: scroll;

        .item {
            width: 120rpx;
            height: 84rpx;
            background: #eeeeee;
            border-radius: 8rpx;
            border: 2rpx solid #eeeeee;
            font-size: 24rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            color: #666666;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            flex: 0 0 auto;
            margin-right: 28rpx;

            &.check {
                background: rgba(0, 154, 68, 0.08);
                border: 2rpx solid #009a44;
                color: #009a44;
            }
        }
    }
    .scroll-main {
        flex: 1;
        height: calc(100vh - 400rpx);
    }
    .scroll-Y {
        height: 100%;
    }

    .main {
        // flex: 1;
        // overflow: auto;
        margin: 26rpx;
        width: 100%;

        .names {
            display: flex;
            align-items: center;
            flex-wrap: nowrap;
            margin-bottom: 18rpx;
            margin-left: 100rpx;

            .name {
                width: 142rpx;
                text-align: center;
                flex-shrink: 0;
            }
        }

        .table {
            position: relative;
            display: table;
            border-collapse: collapse;
            table-layout: auto;
            margin-left: 100rpx;
            border: 2rpx solid #eee;

            .time-line {
                position: absolute;
                width: 100%;
                background-color: red;
                height: 2rpx;
                top: 0;
                left: 0;
                z-index: 10;
            }
        }

        .table-row {
            position: relative;
            display: table-row;
            width: 100%;

            .time {
                position: absolute;
                left: -90rpx;
                font-size: 28rpx;
                color: #333333;
            }
        }

        .table-cell {
            height: 98rpx;
            width: 140rpx;
            min-width: 140rpx;
            min-height: 98rpx;
            max-width: 140rpx;
            max-height: 98rpx;
            display: table-cell;
            border-right: 2rpx solid #eee;
            border-bottom: 2rpx solid #eee;
            border-top: 2rpx solid #eee;
            vertical-align: top;

            .top-line {
                height: 50%;
                width: 100%;
                // background-color: rgba(0, 154, 68, 0.2);
                position: relative;
                font-size: 24rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                display: flex;
                align-items: center;
                color: #009a44;

                &.check {
                    background: rgba(0, 154, 68, 0.2);
                }
                &.top-check {
                    border-top: 2px solid #009a44;
                }
                &.bottom-check {
                    border-bottom: 2px solid #009a44;
                    view{
                        white-space: nowrap;
                    }
                }
                // &::before {
                //     content: "";
                //     position: absolute;
                //     width: 100%;
                //     height: 6rpx;
                //     background-color: #009A44;
                // }
                &.disable {
                    background: #ddd;
                }
                &.child-disable{
                    background: #ddd;
                }
            }

            .bottom-line {
                height: 50%;
                width: 100%;
                // background-color: rgba(0, 154, 68, 0.2);
                position: relative;
                font-size: 24rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                display: flex;
                align-items: center;
                color: #009a44;

                &.check {
                    background: rgba(0, 154, 68, 0.2);
                }

                // &::after {
                //     content: "";
                //     position: absolute;
                //     width: 100%;
                //     height: 6rpx;
                //     background-color: #009A44;
                //     bottom: 0;
                // }
                &.disable {
                    background: #f7f7f7;
                }
            }
        }
    }
    .footer {
        padding: 34rpx 26rpx;
        box-shadow: 0rpx -12rpx 40rpx 0rpx rgba(0, 0, 0, 0.06);
        background-color: #fff;
        .foot-t{
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-size: 26rpx;
            color: #666666;
            margin-bottom: 20rpx;
        
            .foot-t-r{
                display: flex;
                align-items: center;
                
            }
            .tg{
                width: 92rpx;
                height: 28rpx;
                margin-right: 10rpx;
            }
            .jt{
                width: 18rpx;
                height: 32rpx;
                margin-left: 10rpx;
            }
        }
        .btn {
            position: relative;
            display: flex;
            align-items: center;
            justify-content: space-between;
            width: 100%;
            background: linear-gradient(315deg, #00b952 0%, #00e565 100%);
            border-radius: 60rpx;
            height: 80rpx;
            padding: 18rpx 42rpx;
            box-sizing: border-box;

            &::after {
                content: "";
                position: absolute;
                left: 60%;
                height: 100%;
                background-color: rgba(255, 255, 255, 0.3);
                width: 2rpx;
            }

            .btn-l {
                .tatol-price {
                    font-size: 32rpx;
                    font-weight: 600;
                    color: #ffffff;
                    line-height: 44rpx;
                }

                .discount {
                    font-size: 24rpx;
                    font-weight: 400;
                    color: #ffffff;
                }
            }

            .btn-r {
                display: flex;
                align-items: center;
                color: #fff;
                position: relative;

                .jt {
                    margin-left: 24rpx;
                    width: 18rpx;
                    height: 32rpx;
                }
            }
        }
    }
}
</style>
